<template>
    <div class="scroll-container">
        <button @click="scrollTo('left')" :disabled="isAtStart">左</button>
        <div class="scroll-area" ref="scrollArea" @wheel.prevent @mousedown="startScroll" @mouseup="endScroll"
            @mouseleave="endScroll" @mousemove="scroll">
            <div class="scroll-content"
                :style="{ width: contentWidth + 'px', transform: `translateX(${-scrollLeft}px)` }">
                <div class="item" v-for="(item, index) in items" :key="index">{{ item }}</div>
            </div>
        </div>
        <button @click="scrollTo('right')" :disabled="isAtEnd">右</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            items: Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`),
            scrollLeft: 0,
            startScrollPosition: 0,
            scrolling: false,
            itemWidth: 100,
        };
    },
    computed: {
        contentWidth() {
            return this.items.length * this.itemWidth;
        },
        isAtStart() {
            return this.scrollLeft === 0;
        },
        isAtEnd() {
            if (!this.$refs.scrollArea) return false;
            return this.scrollLeft >= this.contentWidth - this.$refs.scrollArea.offsetWidth;
        },
    },
    methods: {
        scrollTo(direction) {
            if (direction === 'left' && !this.isAtStart) {
                this.scrollLeft = Math.max(0, this.scrollLeft - this.$refs.scrollArea.offsetWidth);
            } else if (direction === 'right' && !this.isAtEnd) {
                this.scrollLeft = Math.min(
                    this.contentWidth - this.$refs.scrollArea.offsetWidth,
                    this.scrollLeft + this.$refs.scrollArea.offsetWidth
                );
            }
        },
        startScroll(e) {
            this.scrolling = true;
            this.startScrollPosition = e.pageX - this.$refs.scrollArea.offsetLeft;
        },
        endScroll() {
            this.scrolling = false;
        },
        scroll(e) {
            if (!this.scrolling) return;
            // e.preventDefault();
            const currentScrollPosition = e.pageX - this.$refs.scrollArea.offsetLeft;
            this.scrollLeft = Math.max(0,this.scrollLeft + (this.startScrollPosition - currentScrollPosition)
            );
            this.startScrollPosition = currentScrollPosition;
        },
    },
};
</script>

<style scoped>
.scroll-container {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.scroll-area {
    overflow: hidden;
    width: 100%;
    position: relative;
    cursor: grab;
}

.scroll-area:active {
    cursor: grabbing;
}

.scroll-content {
    display: flex;
    transition: transform 0.3s ease-in-out;
}

.item {
    flex: 0 0 auto;
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: 1px solid #ccc;
}

button {
    margin: 0 10px;
}
</style>